<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <base href="${request.contextPath}/"/>
    <meta charset="UTF-8">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,minimum-scale=1.0">
    <title>车主认证</title>
    <link href="Content/wechat/css/reset.css" rel="stylesheet" type="text/css">
    <!--签到-->
    <link href="Content/wechat/css/geRenZhongXin_SZ_smrz.css" rel="stylesheet" type="text/css">

    <script src="Content/wechat/js/jquery.min.js"></script>
    <!--字体缩放-->
    <script src="Content/wechat/js/ziti.js"></script>
    <!--end 字体缩放-->
    <!--上传图片js-->
    <script src="Content/wechat/js/svg.js"></script>
    <!--end 上传图片js-->
    <script src="Content/wechat/js/jquery.validate.js"></script>
    <!--微信 上传图片js-->
    <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
    <script>
        wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: '${jsApiConfig.appId!}', // 必填，公众号的唯一标识
            timestamp: ${jsApiConfig.timestamp!}, // 必填，生成签名的时间戳
            nonceStr: '${jsApiConfig.nonceStr!}', // 必填，生成签名的随机串
            signature: '${jsApiConfig.signature!}',// 必填，签名
            jsApiList: ['chooseImage', 'uploadImage'] // 必填，需要使用的JS接口列表
        });

    </script>
</head>
<body>
<form id="form1">

    <div class="biaoDan">
        <input class="text" type="text" name="name" placeholder="请输入姓名">
        <input class="text" type="text" name="idnum" placeholder="请输入身份证号码">
        <input class="text" type="text" name="carlicense" placeholder="请输入车牌号">
        <input class="text" type="text" name="carsize" placeholder="请输入车型号">
        <input class="text" type="text" name="drivingage" placeholder="驾龄">
        <input class="text" type="text" name="carage" placeholder="车龄">
        <input class="text" type="text" name="money" placeholder="车价格">

    </div>

    <!--上传多张图片-->
    <section>
        <p class="red">上传文件</p>
        <article>

            <div class="item">
                <svg class="icon addImg" aria-hidden="true">
                    <use xlink:href="#icon-tianjiatupian"></use>
                </svg>
                <input name="url" type="button" class="upload_input" onChange="preview(this)">
                <input type="hidden" id="uploadImgUrl1" name="uploadImgUrl1" value="" class="uploadImgUrls"/>
                <div class="preview"></div>
                <div class="click" onClick="loadImg(this)"></div>
                <div class="delete" onClick="deleteImg(this)">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shanchu4"></use>
                    </svg>
                </div>
                <p>身份证正面</p>
            </div>
            <div class="item">
                <svg class="icon addImg" aria-hidden="true">
                    <use xlink:href="#icon-tianjiatupian"></use>
                </svg>
                <input name="url" type="button" class="upload_input" onChange="preview(this)">
                <input type="hidden" id="uploadImgUrl2" name="uploadImgUrl2" value="" class="uploadImgUrls"/>
                <div class="preview"></div>
                <div class="click" onClick="loadImg(this)"></div>
                <div class="delete" onClick="deleteImg(this)">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shanchu4"></use>
                    </svg>
                </div>
                <p>身份证反面</p>
            </div>
            <div class="item">
                <svg class="icon addImg" aria-hidden="true">
                    <use xlink:href="#icon-tianjiatupian"></use>
                </svg>
                <input name="url" type="button" class="upload_input" onChange="preview(this)">
                <input type="hidden" id="uploadImgUrl3" name="uploadImgUrl3" value="" class="uploadImgUrls"/>
                <div class="preview"></div>
                <div class="click" onClick="loadImg(this)"></div>
                <div class="delete" onClick="deleteImg(this)">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shanchu4"></use>
                    </svg>
                </div>
                <p>本人手持驾驶证</p>
            </div>
            <div class="item">
                <svg class="icon addImg" aria-hidden="true">
                    <use xlink:href="#icon-tianjiatupian"></use>
                </svg>
                <input name="url" type="button" class="upload_input" onChange="preview(this)">
                <input type="hidden" id="uploadImgUrl4" name="uploadImgUrl4" value="" class="uploadImgUrls"/>
                <div class="preview"></div>
                <div class="click" onClick="loadImg(this)"></div>
                <div class="delete" onClick="deleteImg(this)">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shanchu4"></use>
                    </svg>
                </div>
                <p>本人手持行驶证</p>
            </div>

            <div style="clear: left;"></div>
        </article>
    </section>


    <!--end 上传多张图片-->
    <div class="button_shangChuan" id="btnAdd">确定</div>
</form>


</body>
<script type="text/javascript">
    var btnAdd = true;
    // 预览
    var loadImg = function (obj) {
        preview(obj);
    }
    // 删除
    var deleteImg = function (obj) {
        $(obj).parent().find('input').val('');
        $(obj).parent().find('.preview').html('');
        $(obj).hide();
    }

    // 预览
    function preview(obj) {
        var prevDiv = $(obj).parent().find('.preview');
        wx.chooseImage({
            count: 1, // 默认9
            sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
            success: function (res) {
                var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图
                prevDiv.html('<img src="' + localIds + '" />');
                wx.uploadImage({
                    localId: localIds.toString(), // 需要上传的图片的本地ID，由chooseImage接口获得
                    isShowProgressTips: 1, // 默认为1，显示进度提示
                    success: function (res) {
                        $(obj).parent().find('.delete').show();
                        $(obj).parent().find("input[class='uploadImgUrls']").val(res.serverId);
                    }
                });
            }
        });
    }

    $().ready(function () {
        $(".button_shangChuan").click(function () {
                if (!btnAdd) {
                    alert("提交中...");
                    return;
                }
                if ($("#form1").valid()&&uploadImgUrl()) {
                    btnAdd = false;
                    $("#btnAdd").html("提交中...")
                    $.ajax({
                        //几个参数需要注意一下
                        type: "POST",//方法类型
                        dataType: "json",//预期服务器返回的数据类型
                        url: "/wechat/personage/set/realcar/insert",//url
                        data: $('#form1').serialize(),
                        success: function (result) {
                            console.log(result);//打印服务端返回的数据(调试用)
                            if (result.code == 200) {
                                alert(result.info);
                                // location.reload();
                                window.location.href = "/wechat/personage/per_set_index";

                            } else {
                                alert("请稍后再试");
                                btnAdd = true;
                                $("#btnAdd").html("确定");
                            }
                        },
                        error: function () {
                            alert("异常！");
                            btnAdd = true;
                            $("#btnAdd").html("确定");
                        }
                    });
                }
            }
        );

        $("#form1").validate({
            ignore: [],
            rules: {
                name: {
                    required: true,
                    minlength: 2,
                    maxlength: 5,

                },
                idnum: {
                    Validateidnum: true,
                },
                carlicense: {
                    required: true,
                },
                carsize: {
                    required: true,
                },
                drivingage: {
                    required: true,
                },
                carage: {
                    required: true,
                },
                money: {
                    required: true,
                }
            },
            messages: {
                name: {
                    minlength: "(字符不能少于 2 个且不能大于 5个)",
                    maxlength: "(字符不能少于 2 个且不能大于 5个)",
                }
            }


        })
        jQuery.validator.addMethod("Validateidnum", function (value, element) {
            if (value.length != 18) {
                return false;
            }
            return true;
        }, "请输入正确的身份证号");

        function uploadImgUrl() {
            if ($("#uploadImgUrl3").val() != null && $("#uploadImgUrl3").val() != ''
                && $("#uploadImgUrl2").val() != null && $("#uploadImgUrl2").val() != ''
                && $("#uploadImgUrl4").val() != null && $("#uploadImgUrl4").val() != ''
                && $("#uploadImgUrl1").val() != null && $("#uploadImgUrl1").val() != '') {
                return true;
            } else {
                alert("请上传实名图片");
                return false;
            }

        }
    });

</script>
</html>
